<template>
  <div>
    <h3>form {{ formState }}</h3>
    <h4>msg {{ msg }}</h4>
    <a-button @click="getFun()()">点击执行</a-button>
    <br />
    <a-image src="/ddd.jpg" width="100px" height="100px"></a-image>
    <a-form
      :model="formState"
      :label-col="{ style: { width: '120px' } }"
      ref="formRef"
    >
      <a-form-item
        label="姓名"
        v-model:value="formState.name"
        name="name"
        :rules="rules"
      >
        <ItemSet3 v-model:value="formState.name" />
      </a-form-item>
      <!-- <ItemSet
        v-model:name="formState.name"
        v-model:age="formState.age"
        @update:msg="
          (a, b, c) => {
            msg = a + b + c;
          }
        "
      /> -->
      <!-- <a-form-item
        label="爱好"
        :rules="[{ required: true, message: '请输入爱好' }]"
        name="hobby"
      >
        <a-input v-model:value="formState.hobby" />
      </a-form-item>
      <a-form-item label="任意" name="any" :rules="rules">
        <a-input v-model:value="formState.any" placeholder="请输入." />
      </a-form-item> -->
      <!-- <a-form-item label="爱好2">
        <a-select v-model:value="formState.hobby2" @change="handleChange">
          <a-select-option value="1">1</a-select-option>
          <a-select-option value="2">2</a-select-option>
          <a-select-option value="3">3</a-select-option>
        </a-select>
      </a-form-item> -->
    </a-form>
    <a-button @click="test()">校验</a-button>
    <a-button @click="validate()">校验</a-button>
    <a-button @click="resetForm()">重置</a-button>
    <a-button @click="submit">提交</a-button>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "formIndex",
});
</script>
<script setup lang="ts">
import { FormInstance, message } from "ant-design-vue";
import ItemSet from "./components/ItemSet.vue";
import ms from "ms";
import ItemSet3 from "./components/ItemSet3.vue";
import { useDefaultForm } from "@/hooks/form";

const formState = ref<{
  name?: string;
  age?: number;
}>({});
const emit = defineEmits<{}>();

const handleOk = () => {
  alert("执行了提交动作");
};
const { formRef, submit, resetForm, validate } = useDefaultForm(handleOk);

const msg = ref<string>("");
const handleChange = (value: any, option: any) => {
  console.log(
    {
      type: "number",
      transform: (val) => Number(val),
    },
    value
  );
  debugger;
  console.log(value);
};
const rules = [
  {
    required: true,
    message: "请输入值",
  },
  {
    message: "请输入数字",
  },
  {
    validator: (rule: any, value: any) => {
      if (value && value.length > 3) {
        return Promise.reject("长度不能超过3");
      }
      return Promise.resolve("成功了");
    },
  },
];

const test = async () => {
  debugger;
  try {
    const flag = await formRef.value?.validateFields();
    debugger;
  } catch (error) {
    console.log("error", error);
  }
};

const getFun = () => {
  alert("111");
  return () => {
    alert("hello world");
  };
};
</script>

<style scoped></style>
